<template>
  <div class="mainVideo-content padding10">
    <div class="oper_content win-flex-row">
      <span class="name mr5">背景色</span>
      <el-select filterable placeholder="类型" v-model="mainVideoSetting.bgColor">
        <el-option :key="'bgColorType_' + index" v-for="(item, index) in bgColorTypes" :label="item.label"
          :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" @click="startVideo" class="ml5">启动画面</el-button>
    </div>
    <el-table @cell-dblclick="cellDblClick" :data="mainVideoList" height="calc(100% - 50px)" border>
      <el-table-column align="center" prop="itemName" label="主视频" width="140"></el-table-column>
      <el-table-column align="center" prop="mainVideoLinkItemId" label="通过主音频">
        <template slot-scope="scope">
          {{ scope.row.map.mainVideoLinkItemName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="mainVideoLinkKeyword" label="通过关键字"></el-table-column>
    </el-table>


    <el-dialog title="关联主音频" :visible.sync="linkMainFileOpen" width="600px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="linkMainFileForm" :model="linkMainFileForm" :rules="rules" label-width="80px">
        <el-form-item label="关联文件" prop="linkItemId">
          <el-select multiple filterable clearable placeholder="关联文件" v-model="linkMainFileForm.linkItemId">
            <el-option :key="'linkItemId_' + index" v-for="(item, index) in mainAudioList" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="linkMainFileOpen = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="saveLinkMainFile">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { bgColorTypes } from '@/enum/enums';
import { createWindow } from '@/api/mainVideo/mainVideo';
import { list, saveEntity } from '@/api/script/item';
import { ScriptType } from '@/enum/enums';
export default {
  name: 'MainVideo',
  data() {
    return {
      pageParams: {
        pageNum: 1,
        pageSize: 50,
        queryParams: {
          F_scriptCategoryId_eq: '',
          F_scriptType_eq: '',
        }
      },
      linkMainFileOpen: false,
      linkMainFileForm: {
        id: '',
        linkItemId: []
      },
      rules: {
        // linkItemId: [{ required: true, message: '关联文件不能为空', trigger: 'blur' }],
      },
      mainAudioList: [],
      mainVideoList: [],
      bgColorTypes,
    };
  },

  created() {
    this.getList(ScriptType.MAIN_VIDEO.dbCode);
  },
  watch: {
    'fileDirectory.categoryId': {
      handler() {
        this.getList(ScriptType.MAIN_VIDEO.dbCode);
      },
    }
  },
  computed: {
    fileDirectory() {
      return this.pageConfig.fileDirectory;
    },
    mainVideoSetting() {
      return this.pageConfig.mainVideoSetting;
    },
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  methods: {
    cellDblClick(row, column, cell, event) {
      const linkField = column.property;
      if (linkField == 'mainVideoLinkItemId') {
        //通过主音频文件关联
        this.linkMainFileForm.id = row.id;
        this.linkMainFileForm.linkItemId = JSON.parse(row.mainVideoLinkItemId);
        this.linkMainFileOpen = true;
        this.getList(ScriptType.MAIN_AUDIO.dbCode);
      } else if (linkField == 'mainVideoLinkKeyword') {
        //通过关键字关联
        this.$prompt('请输入关键字，以竖线分隔', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          inputValue: row.mainVideoLinkKeyword,
        }).then(({ value }) => {
          saveEntity({
            id: row.id,
            mainVideoLinkKeyword: value
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功');
              this.getList(ScriptType.MAIN_VIDEO.dbCode);
            }
          });
        }).catch(() => { });
      }
    },
    saveLinkMainFile() {
      this.$refs['linkMainFileForm'].validate(valid => {
        if (valid) {
          this.$modal.loading('正在加载');
          saveEntity({
            id: this.linkMainFileForm.id,
            mainVideoLinkItemId: JSON.stringify(this.linkMainFileForm.linkItemId)
          }).then(res => {
            this.$modal.msgSuccess('操作成功');
            this.$modal.closeLoading();
            this.linkMainFileOpen = false;
            this.getList(ScriptType.MAIN_VIDEO.dbCode);
          });
        }
      });
    },
    startVideo() {
      createWindow({
        bgColor: this.mainVideoSetting.bgColor,
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('启动画面成功');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getList(scriptType) {
      if (scriptType == ScriptType.MAIN_VIDEO.dbCode) {
        this.mainVideoList = [];
      }
      this.pageParams.queryParams.F_scriptCategoryId_eq = this.fileDirectory.categoryId;
      this.pageParams.queryParams.F_scriptType_eq = scriptType;
      list(this.pageParams).then(res => {
        if (scriptType == ScriptType.MAIN_VIDEO.dbCode) {
          this.mainVideoList = res.result.items;
        } else {
          this.mainAudioList = res.result.items.map(item => {
            return {
              label: item.itemName,
              value: item.id
            };
          });
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.mainVideo-content {
  height: 260px;
  overflow-y: auto;

  .oper_content {
    align-items: center;
    height: 50px;
  }
}
</style>
